var mainLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
});
//所有内容的长度
var features = new Array(locations.length);


for (var i = 0; i < locations.length; i++) {
    features[i] = new ol.Feature(new ol.geom.Point(locations[i]));
    features[i].dataEntity=new DataClass();
    features[i].dataEntity.AQI = 33 + i * 15;
    features[i].dataEntity.location = nameList[i];
    features[i].dataEntity.time=new Date().toString()+features[i].dataEntity.AQI;
}

var source = new ol.source.Vector({
    features: features
});
var clusterSource = new ol.source.Cluster({
    source: source
});
var styleCache = {};

var clusters = new ol.layer.Vector({
    source: clusterSource,
    style: function (feature) {
        const instance = feature.instance();
        const AQI = instance.AQI;

        var color = chooseColorByAQI(AQI);
        var style = [
            new ol.style.Style({
                text: new ol.style.Text({
                    font: 'normal 14px 微软雅黑',
                    text: instance.location + "\n" + instance.AQI,
                    fill: new ol.style.Fill({
                        color: '#fff'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#2b2b2b',
                        width: 2

                    })
                }),
                image: new ol.style.Circle({
                    radius: 30,
                    stroke: new ol.style.Stroke({
                        color: '#fff'
                    }),
                    fill: new ol.style.Fill({
                        color: color
                    })
                })
            })
        ];
        return style;
    }
});

var map = new ol.Map({
    target: 'map',
    layers: [
        mainLayer,
        clusters
    ]
    ,
    view: new ol.View({
        center: wuhan,
        zoom: 12
    }),
    controls: ol.control.defaults().extend([
        new ol.control.MousePosition({
            coordinateFormat: ol.coordinate.createStringXY(6),
            projection: 'EPSG:4326',
            className: 'custom-mouse-position',
            target: document.getElementById('mouse-position')
        })
    ]),
    loadTilesWhileAnimating: true
});


var yOffset=-60;

var displayFeatureInfo = function (pixel) {
    pixel[1] += yOffset;
    var feature = map.forEachFeatureAtPixel(pixel, function (feature, layer) {
        return feature;
    });

    //find the Feature  !!!!!!!!!
    if (feature !== undefined) {
        document.getElementById("map").style.cursor = "pointer";
        feature.instance().time=new Date();
        var instance=feature.instance();
        g('pmContent').innerText = instance.toString();

        myChart.changeOption(function (it) {
            it.title[0].text=instance.location;
        })
    } else {
        document.getElementById("map").style.cursor = "default";
    }
};

function getFeatureByPixel(pixel) {
    pixel[1] +=yOffset;
    var feature;
    feature = map.forEachFeatureAtPixel(pixel, function (feature, layer) {
        console.log(layer);
        return feature;
    });

    return feature;
}

map.on('pointermove', function (evt) {
    if (evt.dragging) {
        return;
    }
    var pixel = map.getEventPixel(evt.originalEvent);
    displayFeatureInfo(pixel);
});
map.on('click', function (evt) {
    var pixel = map.getEventPixel(evt.originalEvent);
    var f = getFeatureByPixel(pixel);
    if (f !== undefined) {
        g('pmContent').innerText = (f.instance().toString());
    }
});
var g = function (id) {
    return document.getElementById(id);
};